<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel='stylesheet' href='css/main.css'/>
    <link rel='stylesheet' href='css/init.css'/>
    <link rel='stylesheet' href='css/font-awesome/css/font-awesome.min.css'/>
</head>
<body ng-app="myApp">
<header>
    <div id="header">
        <div class="logo"><img ng-src="images/logo.png"></div>
        <div class="nav">
            <div class="top">
                <a class="setIndex">设置主页</a>
                <a class="collect">收藏本站</a>
                <a class="phone">服务电话:<span class="phone_num">177XXXX0838</span></a>
            </div>
            <div class="bottom">
                <ul ng-controller="nav">
                    <li ng-repeat="nav in navList" ng-click="showClassify(nav.classify)"
                        ng-class="{active:classActive(nav.classify)}"><a href="{{nav.href}}">{{nav.classify}}</a></li>
                </ul>
            </div>
        </div>
    </div>
</header>
<article>
    <div class="img_scroll" ng-controller="imgScroll">
        <lunbo></lunbo>
        <!-- <img ng-repeat="img in images" ng-src="{{img.href}}" ng-show="showImg(img.id)">-->
    </div>
    <div class="qiyefuwu" ng-controller="qiyefuwu" id="qiyefuwu">
        <h1 class="title">员源企业服务</h1>
        <h1 class="title en">Enterprise service</h1>
        <div ng-repeat="x in qiyefuwu" class="banner">
            <h1>{{x.title}}</h1>
            <div class="img_show"><img ng-src="{{x.img}}" alt="{{x.title}}"></div>
            <p>{{x.description}}</p>
        </div>
    </div>
    <div class="example" ng-controller="example">
        <h1 class="title">员源客户案例</h1>
        <h1 class="title en">Classic Case</h1>
        <div ng-repeat="x in news" class="banner">
            <h1>案例名称：{{x.title}}</h1>
            <div class="img_show"><img ng-src="{{x.img}}" alt="{{x.title}}"></div>
            <p>{{x.description}}</p>
            <div class="detail">
                <a class="more_detail">了解详情</a>
            </div>
        </div>
    </div>
    <div class="inline_info" id="news">
        <div class="hot_new" ng-controller="news">
            <h1 class="new">员源新闻<span class="hot">Hot New</span><span class="more">更多<i style="color: red"
                                                                                        class="fa  fa-arrow-circle-right"></i></span>
            </h1>
            <div class="top_news">
                <div class="image_top"><img ng-src="{{top1.image}}" alt="{{top1.title}}"></div>
                <div class="title"><a href="{{top1.href}}">{{top1.title}}</a></div>
                <div class="content">{{top1.content}}</div>
            </div>
            <div class="top10">
                <a ng-repeat="x in top" href="{{x.href}}"><i class="fa fa-square-o"></i>{{x.title}}</a>
            </div>
        </div>
        <div class="new_job" ng-controller="job" id="new_job">
            <h1 class="new">员源最新招聘<span class="hot">Hot Job</span><span class="more">更多<i style="color: red"
                                                                                          class="fa  fa-arrow-circle-right"></i></span>
            </h1>
            <div class="job_list">
                <table>
                    <tr>
                        <td>职位名称</td>
                        <td>工作地点</td>
                        <td>数量</td>
                        <td>薪资</td>
                        <td>结束时间</td>
                    </tr>
                    <tr ng-repeat="job in jobs">
                        <td>{{job.position}}</td>
                        <td>{{job.place}}</td>
                        <td>{{job.amount}}</td>
                        <td>{{job.salary}}</td>
                        <td>{{job.endTime}}</td>
                    </tr>
                </table>
            </div>
            <div></div>
        </div>
    </div>
</article>
<footer ng-controller="nav">
    <ul>
        <li ng-repeat="nav in navList"><a href="{{nav.href}}">{{nav.classify}}</a></li>
    </ul>
    <div class="des">厦门员源主要业务有：培训、人事代理、项目申报、劳务派遣、企业咨询、验厂辅导等服务；涉及电子、机械、食品、饮料、化妆、化纤、工艺
        <br>厦门员源主要业务有：培训、人事代理、项目申报、劳务派遣、企业咨询、验厂辅导等服务；涉及电子
    </div>
    <div class="contact" id="contact">联系我们 <br>
        公司名称：厦门员源人力资源服务有限公司 <br>
        公司地址：厦门市XX工业集中区乌涂15-17栋 <br>
        公司电话：0592-7XXX
    </div>
    <div class="copyright">Copyright © 2011 厦门员源人力资源服务有限公司 版权所有 复制必究 ICP许可证号:闽ICP备110092</div>
</footer>
<div id="top"><a href="javascript:scroll(0,0)"><i class="fa fa-arrow-circle-up fa-lg"></i><br>top</a></div>
<script src="./js/angular.min.js"></script>
<script src="./js/myApp.js"></script>
<script>
    app.directive('lunbo', function () {
        return {
            restrict: 'E',
            template: '<div><img ng-repeat="img in images" ng-src="{{img.href}}"><div class="circle"><i ng-repeat="img in images" class="fa fa-circle" ng-click="showC($index)" ng-mouseover="showO($index)"></i></div></div>',
            replace: true,
            link: function (scope, element, attrs) {
                var step = 0;

                function show1(data) {
                    for (var i = 0; i < element.find('img').length; i++) {
                        if (i != data) {
                            element.find('img')[i].style.display = "none";
                            element.find('div').children('i')[i].style.color = "#777777";
                        } else {
                            element.find('img')[data].style.display = "block";
                            element.find('div').children('i')[data].style.color = "red";
                        }
                    }
                }

                scope.showC = function (data) {
                    step++;
                    step = step % element.find('img').length;
                    show1(data);
                };
                scope.showO = function (data) {
                    show1(data);
                };
                setTimeout(function () {
                    show1(step);
                }, 0);
                setInterval(function () {
                    step++;
                    step = step % element.find('img').length;
                    show1(step);
                }, 2000);

            }
        }
    });
    /*导航栏*/
    app.controller('nav', function ($scope) {
        $scope.navList = [{
            href: "#",
            classify: "网站首页"
        }, {
            href: "#",
            classify: "关于源员"
        }, {
            href: "#new_job",
            classify: "人才通道"
        }, {
            href: "#",
            classify: "技能培训"
        }, {
            href: "#",
            classify: "劳务派遣"
        }, {
            href: "#qiyefuwu",
            classify: "企业服务"
        }, {
            href: "#",
            classify: "成功案例"
        }, {
            href: "#newa",
            classify: "新闻资讯"
        }, {
            href: "#contact",
            classify: "联系我们"
        }
        ];
        $scope.Classify = "网站首页";
        $scope.showClassify = function (data) {
            $scope.Classify = data;
        };
        $scope.classActive = function (data) {
            if (data == $scope.Classify) {
                return true;
            } else {
                return false;
            }
        }
    });
    app.controller("imgScroll", function ($scope) {
        $scope.images = [{
            id: "0",
            href: "images/banner1.png"
        }, {
            id: "1",
            href: "images/banner2.png"
        }, {
            id: "2",
            href: "images/banner3.png"
        }, {
            id: "3",
            href: "images/banner4.png"
        }];
        /*      var id=0;
         var show1=function (data,id) {
         var flag;
         if($scope.images[id].id==data){
         flag= true;

         }else {
         flag= false;
         }
         alert($scope.images[id].id==data);
         if($scope.id<$scope.images.length){
         id++;
         }
         else {
         id=0;
         }
         return flag;
         };*/
        /* var i=0;
         function show(data) {
         var flag;
         if($scope.images[i].id==data){
         flag= true;
         }
         else {
         flag= false;
         }
         return flag;
         }
         $scope.showImg=function (data) {
         var flag=show(data);
         return flag;
         };*/
    });
    /*企业服务*/
    app.controller('qiyefuwu', function ($scope) {
        $scope.qiyefuwu = [{
            title: "企业培训",
            img: 'images/qiyefuwu1.png',
            description: "为企业经营诊断整合、体系建立、流程梳理、 各种类型的员工培训、代理企业新技术项目 ..."
        }, {
            title: "劳务派遣",
            img: 'images/qiyefuwu2.png',
            description: "为企业提供劳务用工派遣（临时工、小时工、 普工、固定工、承包生产线、短期项目承包、  ..."
        }, {
            title: "企业服务",
            img: 'images/qiyefuwu3.png',
            description: "为企业提供基、中、高端技工，基、中、高 端管理人才和人才测评... "
        }
        ];
    });
    /*案例*/
    app.controller('example', function ($scope) {
        $scope.news = [{
            title: "企业培训",
            img: 'images/example.png',
            description: "为企业经营诊断整合、体系建立、流程梳理、 各种类型的员工培训、代理企业新技术项目 ..."
        }, {
            title: "劳务派遣",
            img: 'images/example.png',
            description: "为企业提供劳务用工派遣（临时工、小时工、 普工、固定工、承包生产线、短期项目承包、承包生产线、短期项目承包  ..."
        }, {
            title: "企业服务",
            img: 'images/example.png',
            description: "为企业提供基、中、高端技工，基、中、高 端管理人才和人才测评... "
        }
        ];
    });
    /*新闻*/
    app.controller('news', function ($scope) {
        $scope.top1 = {
            title: "企业培训",
            image: 'images/example.png',
            href: "#",
            content: "为企业经营诊断整合、体系建立、流程梳理、 各种类型的员工培训、代理企业新技术项目 ..."
        };
        $scope.top = [{
            title: "企业培训",
            href: "#"
        }, {
            title: "企业培训",
            href: "#"
        }, {
            title: "企业培训",
            href: "#"
        }, {
            title: "企业培训",
            href: "#"
        }, {
            title: "企业培训",
            href: "#"
        }
        ];
    });
    /*员工*/
    app.controller('job', function ($scope) {
        $scope.jobs = [{
            position: "经理",
            place: "上海",
            amount: "3",
            salary: "10000",
            endTime: "2015-9-20"
        },
            {
                position: "经理",
                place: "上海",
                amount: "3",
                salary: "10000",
                endTime: "2015-9-20"
            }, {
                position: "经理",
                place: "上海",
                amount: "3",
                salary: "10000",
                endTime: "2015-9-20"
            }, {
                position: "经理",
                place: "上海",
                amount: "3",
                salary: "10000",
                endTime: "2015-9-20"
            },
            {
                position: "经理",
                place: "上海",
                amount: "3",
                salary: "10000",
                endTime: "2015-9-20"
            }, {
                position: "经理",
                place: "上海",
                amount: "3",
                salary: "10000",
                endTime: "2015-9-20"
            }

        ];
    });
</script>
</body>
</html>